// 管理全部的用户组件
import React, { Component } from 'react'

import UserHeader from './Header'
import UserList from './Output'
import UserInput from './Input'
import DianZhan from './DianZhan'

//import UserServices, {getUsers } from '../../services/User'
import {getUsers } from '../../services/User'

//export default class User extends Component {
export class User extends Component {

    // props 是组件外部传递给调用组件对象，而state是组件自身的状态属性（类组件才有状态state）
    // 非受控组件和受控组件和半受控组件
    //（函数属于无状态组件，类组件属于有状态组件，只能通过props改变的组件叫完全受控，只通过state改变的组件叫非受控组件
    //state = {
        //title: "类内部定义的state对象定义的title"
    //}

    // 构造函数 （在构造函数定义的state会覆盖类定义的state
    constructor() {
        // 在构造函数使用this，需要super下
        super()
        this.state = {
            title: "构造函数定义的state对象定义的title",
            htmlVal: '<div>我是富文本的内容</div>',
            users: [
                {
                    id: 1,
                    userId: 1,
                    title: 'xhj1',
                    completed: true
                },
                {
                    id: 2,
                    userId: 2,
                    title: 'xhj2',
                    completed: false
                }
            ],
            isLoading: false
        }
        // 三目运算
        console.log(this.state.users[1].completed? "开启":'未开启')
        // 两目运算
        console.log(this.state.users[0].completed && "开启")
        this.state.users.map(user =>{
            console.log(user.title)
        })

    }

    initListData = () => {
        this.setState({
            isLoading: true
        })
        getUsers()
        .then(reps => {
            console.log("User/index.js 加载完成，开始ajax请求数据")
            console.log(reps)
            if(reps.status === 200){
                // 延迟3秒执行
                setTimeout(() => {
                    this.setState({
                        users: reps.data
                    })
                },3000)
            }
        })
        .catch(err => {
            console.log(err)
        })
        .finally(() => {
            this.setState({
                isLoading: false
            })
        })
    }

    // 加载完dom开始处理页面数据
    componentDidMount(){
        this.initListData()
    }

    // 两层操作(演示添加操作)
    // 在父组件（非受控组件定义，传递添加方法让受控组件通过props进行修改。也就是子组件修改父组件的状态
    addUserFn = (name) => {
        console.log("我在User下面的index.js这是我的子组件调用我传递的函数传回来的=",name)
        // this.setState({
        //     users: this.state.users.concat({ //这个时候添加不能使用push，因为push返回的是数组的长度，赋值state的users对象Map无法接收
        //         id: Math.random(),
        //         name: name,
        //         completed: false

        //     })
        // })
        // 第二种方式 ，先复制以前的，然后添加，最后在setState
        //const newUsers = this.state.users.slice() //数组拷贝第一种方式
        const newUsers = [...this.state.users] // 第二种 平铺到你的数组容器里面
        // 如果是真事的项目添加，应该先ajax调用post接口，然后接口返回正常，调用列表接口刷新state的users数据，
        // 或者添加接口返回添加成功的数据，把接口返回数据再push
        newUsers.push({
            id: Math.random(),
            name: name,
            completed: false
        })
        this.setState({
            users: newUsers
        })

    }

    // 三层操作
    threeEditUserEnableFn = (id) => {
        console.log("测试三层组件调用，我是最上层父组件的函数,id=",id)
        this.setState((prevState) => {
            return {
                users: prevState.users.map(user =>{
                    if(user.id === id){
                        user.completed = !user.completed
                    }
                    return user
                })
            }
        })
    }


    render() {
        return (
            <div>
                {/* 数据安全获取，防止插入js脚本 */}
                <div dangerouslySetInnerHTML={{__html: this.state.htmlVal}} />
                {/* <p>循环数据: </p>
                {
                    this.state.users.map(user => {
                    return <div key={user.id}>{user.title}</div>
                    })
                } */}
                {/* 传递参数要{}包裹，不然就当字符串处理了，可以通过prop-types 来检查传递的props是否类型正确 */}
                <UserHeader title='用户头部信息（函数式组件参数）' param={1}>
                    {/* 我是子元素参数的children对象（类对象为this.props.children),可以传递任何的东西 */}
                    {this.state.title}
                </UserHeader>
                {/* 可以把父组件的函数传递给子组件,子组件在props获取到该函数调用，进行传递参数 */}
                <UserInput bntTxt='添加' addUserFn={this.addUserFn} />
                {/* 条件渲染 */}
                {
                    this.state.isLoading ? <div>数据加载中......</div> :
                        <UserList users={this.state.users}
                            threeEditUserEnableFn={this.threeEditUserEnableFn} />
                }
                
                <DianZhan />
            </div>
        )
    }
}
